<template>
    <div>
        <!--<div>-->
            <!--{{list}}-->
            <!--{{copyList}}-->
        <!--</div>-->
        <!--<div>-->
        <!--{{childrenindex}}&#45;&#45;{{childrenindexs}}-->
        <!--</div>-->
        <template v-for="(item, index) in copyList">
            <template v-if="item.type == 'start'">
                <div class="node-wrap">
                    <div class="node-wrap-box start">
                        <section class="flow-path-card start-node">
                            <header class="header" @click.stop>
                                <div class="title-box" @click="suggestFlagInput(index)"
                                     style="height: 100%; width: 190px;">
                                    <span class="title-text" v-show="!item.suggestFlag">{{item.title}}</span>
                                    <el-input class="title-input" ref="inputs" v-model="item.title" focus autofocus
                                              v-show="item.suggestFlag" @blur="blur(index)"/>
                                </div>
                            </header>
                            <div class="body"><span class="text">所有人</span></div>
                        </section>
                        <div class="add-node-btn-box flex justify-center">
                            <div class="add-node-btn">
                                <el-popover ref="popoverRef" placement="right" width="460" trigger="click">
                                    <processPopover @click="beginpopoverClick($event,0,'isBegin')" :list="copyList"
                                                    :index="index"></processPopover>
                                    <button class="btn el-popover__reference" slot="reference">
                                        <i class="el-icon-plus icon"></i>
                                    </button>
                                </el-popover>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="item.type == 'node-wrap-approver'">
                <div class="node-wrap" :id="item.id" style="position: relative">
                    <div class="node-wrap-box approver">
                        <section class="flow-path-card approver" style="position: relative">
                            <header class="header">
                                <div class="title-box" @click="suggestFlagInput(index)"
                                     style="height: 100%; width: 190px;">
                                    <span class="title-text" v-show="!item.suggestFlag">{{item.title}}</span>
                                    <el-input class="title-input" ref="inputs" v-model="item.title"
                                              v-show="item.suggestFlag" @blur="blur(index)"/>
                                </div>
                                <div class="actions" @click="del(index)"><i class="el-icon-close icon"></i>
                                </div>
                            </header>
                            <div class="body"><span class="text">所有人</span></div>
                        </section>
                        <div class="add-node-btn-box flex justify-center">
                            <div class="add-node-btn">
                                <el-popover ref="popoverRefs" placement="right" width="460" trigger="click">
                                    <processPopover @click="popoverClick($event,index)" :list="copyList"
                                                    :index="index"></processPopover>
                                    <button class="btn el-popover__reference" slot="reference">
                                        <i class="el-icon-plus icon"></i>
                                    </button>
                                </el-popover>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="item.type == 'node-wrap-subFlow'">
                <div class="node-wrap" :id="item.id" style="position: relative">
                    <div class="node-wrap-box subFlow">
                        <section class="flow-path-card subFlow" style="position: relative">
                            <header class="header">
                                <div class="title-box" @click="suggestFlagInput(index)"
                                     style="height: 100%; width: 140px;">
                                    <span class="title-text" v-show="!item.suggestFlag">{{item.title}}</span>
                                    <el-input class="title-input" ref="inputs" v-model="item.title"
                                              v-show="item.suggestFlag" @blur="blur(index)"/>
                                </div>
                                <div class="actions" @click="del(index)"><i class="el-icon-close icon"></i>
                                </div>
                                <el-tag size="mini" class="async-state">同步</el-tag>
                            </header>
                            <div class="body"><span class="text">所有人</span></div>
                        </section>
                        <div class="add-node-btn-box branchHeight flex justify-center">
                            <div class="add-node-btn">
                                <el-popover ref="popoverRefs" placement="right" width="460" trigger="click">
                                    <processPopover @click="popoverClick($event,index)" :list="copyList"
                                                    :index="index"></processPopover>
                                    <button class="btn el-popover__reference" slot="reference">
                                        <i class="el-icon-plus icon"></i>
                                    </button>
                                </el-popover>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="item.type == 'branch-wrap'">
                <div class="branch-wrap" style="position: relative">
                    <div class="branch-box-wrap">
                        <div class="branch-box flex justify-center relative">
                            <button class="btn"
                                    @click="addCondition(index,'branch-wrap')">添加条件
                            </button>
                            <template v-for="(items, indexs) in item.list">
                                <div class="col-box">
                                    <div class="center-line"></div>
                                    <div class="top-cover-line"></div>
                                    <div class="bottom-cover-line"></div>
                                    <div class="node-wrap">
                                        <div class="node-wrap-box condition">
                                            <section class="flow-path-card condition">
                                                <header class="header">
                                                    <div class="title-box" @click="suggestFlagInput(index,indexs)"
                                                         style="height: 100% !important; width: 140px;">
                                                        <span class="title-text" v-show="!items.suggestFlag">{{items.title}}</span>
                                                        <el-input class="title-input" ref="inputs" v-model="items.title"
                                                                  v-show="items.suggestFlag"
                                                                  @blur="conditionBlur(index,indexs)"/>
                                                    </div>
                                                    <div class="actions"><i class="el-icon-close icon"
                                                                            @click="delCondition(index,indexs)"></i>
                                                    </div>
                                                </header>
                                                <div class="body">
                                                    <div class="text">请设置条件</div>
                                                </div>
                                            </section>
                                            <div class="add-node-btn-box branchHeight flex justify-center">
                                                <div class="add-node-btn">
                                                    <el-popover ref="popoverRefs" placement="right"
                                                                width="460" trigger="click">
                                                        <processPopover
                                                                @click="popoverClick($event,index,'branch-wrap',indexs)">
                                                        </processPopover>
                                                        <button class="btn el-popover__reference"
                                                                slot="reference">
                                                            <i class="el-icon-plus icon"></i>
                                                        </button>
                                                    </el-popover>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!--{{items}}111-->
                                    <!--{{items.children}}-->
                                    <template v-if="items.children && items.children.length !== 0">
                                        <processSubject :list="items.children" :setId="items.setId"></processSubject>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>
                    <div class="add-node-btn-box flex justify-center">
                        <div class="add-node-btn">
                            <el-popover ref="popoverRefs" placement="right" width="460" trigger="click">
                                <processPopover @click="popoverClick($event,index)" :list="copyList" :index="index">
                                </processPopover>
                                <button class="btn el-popover__reference" slot="reference">
                                    <i class="el-icon-plus icon"></i>
                                </button>
                            </el-popover>
                        </div>
                    </div>
                </div>
            </template>
            <template v-if="item.type == 'branchFlow'">
                <div class="branch-wrap" style="position: relative">
                    <div class="branch-box-wrap">
                        <div class="branch-box flex justify-center relative">
                            <button class="btn"
                                    @click="addCondition(index,'branchFlow')">添加分支
                            </button>
                            <template v-for="(items, indexs) in item.list">
                                <div class="col-box">
                                    <div class="center-line"></div>
                                    <div class="top-cover-line"></div>
                                    <div class="bottom-cover-line"></div>
                                    <div class="node-wrap">
                                        <div class="node-wrap-box approver  branchFlow ">
                                            <section class="flow-path-card approver">
                                                <header class="header">
                                                    <div class="title-box" @click="suggestFlagInput(index,indexs)"
                                                         style="height: 100% !important; width: 140px;">
                                                                        <span class="title-text"
                                                                              v-show="!items.suggestFlag">{{items.title}}</span>
                                                        <el-input class="title-input" ref="inputs"
                                                                  v-model="items.title" v-show="items.suggestFlag"
                                                                  @blur="conditionBlur(index,indexs)"/>
                                                    </div>
                                                    <div class="actions"><i class="el-icon-close icon"
                                                                            @click="delCondition(index,indexs)"></i>
                                                    </div>
                                                </header>
                                                <div class="body"><span class="text">请设置审批人</span></div>
                                            </section>
                                            <div class="add-node-btn-box flex justify-center">
                                                <div class="add-node-btn">
                                                    <el-popover ref="popoverRefs" placement="right"
                                                                width="460" trigger="click">
                                                        <processPopover
                                                                @click="popoverClick($event,index,'branchFlow',indexs)">
                                                        </processPopover>
                                                        <button class="btn el-popover__reference"
                                                                slot="reference">
                                                            <i class="el-icon-plus icon"></i>
                                                        </button>
                                                    </el-popover>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <template v-if="items.children && items.children.length !== 0">
                                        <processSubject :list="items.children" :setId="items.setId"></processSubject>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </div>
                    <div class="add-node-btn-box flex justify-center">
                        <div class="add-node-btn">
                            <el-popover ref="popoverRefs" placement="right" width="460" trigger="click">
                                <processPopover @click="popoverClick($event,index)" :list="copyList" :index="index">
                                </processPopover>
                                <button class="btn el-popover__reference" slot="reference">
                                    <i class="el-icon-plus icon"></i>
                                </button>
                            </el-popover>
                        </div>
                    </div>
                </div>
            </template>
        </template>
    </div>
</template>

<script>
  import processPopover from '@/components/processDesign/processPopover.vue'; // 流程选择
  export default {
    name: "processSubject",
    props: {
      list: {
        type: Array,
        default() {
          return []
        }
      },
      setId: {
        type: [Number, String],
        default: ''
      }
    },
    data() {
      return {
        copyList: []
      }
    },
    watch: {
      copyList(val) {
        // console.log(val, '....copyList');
        // console.log(this.list,'.....list');
        if (this.setId === '') {
          localStorage.setItem('result',JSON.stringify([...this.copyList]))
        }else{
          let arr = JSON.parse(localStorage.getItem('result'));
          localStorage.setItem('result',JSON.stringify([...this.addChildren(this.setId,arr,val)]));
          localStorage.setItem('result',JSON.stringify([...this.delChildren(this.setId,arr)]));
        }
        console.log(JSON.parse(localStorage.getItem('result')), ';;;result');
      },
      list(val){
        if(this.setId){
          this.copyList = JSON.parse(JSON.stringify(this.list));
        }

      },
    },
    components: {
      processPopover
    },
    created() {
      this.copyList = JSON.parse(JSON.stringify(this.list));
    },
    mounted() {
      // this.$nextTick(()=>{
      //   this.$jsPlumb.connect({
      //     source: 'test4',
      //     target: 'test5',
      //     endpoint: 'Blank',
      //     connector: ['Bezier'],
      //     EndpointStyle: {radius: 10, fill: '#999'},// 端点样式
      //     PaintStyle: {stroke: '#999', strokeWidth: 1},// 绘画样式，默认8px线宽 #456
      //     HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 1},// 默认悬停样式 默认为null
      //     anchor: ['Right', 'Left'],
      //     overlays:[
      //       "Arrow",
      //       [ "Label", { label:"大于100时", location:0.25,width: 6,  length: 3, id:"myLabel" } ]
      //     ],
      //     DrapOptions: {cursor: 'crosshair', zIndex: 2000}
      //   })
      // })
    },
    beforeUpdate(){
      // this.copyList = JSON.parse(JSON.stringify(this.list));
    },
    methods: {
      /* 递归加children */
      addChildren(id,arr,val){
        for( let i = 0; i< arr.length; i++ ){
          if(arr[i].hasOwnProperty('list')){
            for (let j = 0; j < arr[i].list.length; j++){
              if(arr[i].list[j].setId === id){
                arr[i].list[j].children = [...val];
              }
              if(arr[i].list[j].hasOwnProperty('children')){
                this.recursive(id, arr[i].list[j].children);
              }
            }
          }
        }
        return arr;
      },
      /* 递归删除result数组中children对象本身 */
      delChildren(id,arr){
        for( let i = 0; i< arr.length; i++ ){
          if(arr[i].hasOwnProperty('list')){
            for (let j = 0; j < arr[i].list.length; j++){
              if(arr[i].list[j].hasOwnProperty('children')){
                if(arr[i].list[j].children.length === 0){
                  if(arr[i].list[j].setId === id){
                    delete arr[i].list[j].children;
                  }
                }else{
                  this.recursive(id, arr[i].list[j].children);
                }

              }
            }
          }
        }
        console.log(arr,'....arr删除的方法中返回的数组');
        return arr;
      },
      /* 轮询查id,初始递归法 */
      recursive(id,arr){
        let ids = -1;
        let key = [];
        for( let i = 0; i< arr.length; i++ ){
          if(arr[i].setId === id){
             key.push(i);
          }
          if(arr[i].hasOwnProperty('list')){
            for (let j = 0; j < arr[i].list.length; j++){
              if(arr[i].list[j].setId === id){
                 key.push(i,j);
              }
              if(arr[i].list[j].hasOwnProperty('children')){
                key.push(i,j)
                 this.recursive(id, arr[i].list[j].children);
              }
            }
          }
        }
        return key
      },
      inputClick(e, title) {
        console.log(e, '111111111111');
        title = e;
        // this.$forceUpdate();
      },
      /* 点击添加节点 */
      beginpopoverClick(item, index, type) {
        this.$refs.popoverRef[0].doClose();
        this.copyList.splice(1, 0, item);
        this.$forceUpdate();
      },
      // 唤起input
      suggestFlagInput(index, indexs) {
        console.log(index, indexs);
        if (indexs == 'undefined' || indexs == null) {
          this.copyList[index].suggestFlag = true;
        } else {
          this.copyList[index].list[indexs].suggestFlag = true;
        }
        this.$forceUpdate();
        this.$nextTick(() => {
          console.log(this.$refs);
          this.$refs.inputs[0].focus();
        });
      },
      popoverClick(item, index, type, indexs) {
        if (type == 'branch-wrap') {
          this.$refs.popoverRefs.map(item => {
            item.doClose();
          });
          this.copyList[index].list[indexs].children = [item];
          this.$forceUpdate();
        } else if (type == 'branchFlow') {
          this.$refs.popoverRefs.map(item => {
            item.doClose();
          });
          this.copyList[index].list[indexs].children = [item];
          this.$forceUpdate()
        } else {
          console.log(111);
          this.$refs.popoverRefs.map(item => {
            item.doClose();
          });
          // this.$refs.popoverRefs[index].doClose();
          this.copyList.splice(index + 1, 0, item);
          this.$forceUpdate();
        }
        // console.log(this.list);
      },
      /* 点击删除节点 */
      del(index) {
        if(this.setId){
          if(this.copyList.length === 1) {
            this.list = [];
            this.$emit('del',[]);
            this.copyList = [];
          }else{
            this.copyList.splice(index, 1);
          }
          this.$forceUpdate();
        }else{
          this.copyList.splice(index, 1);
          this.$forceUpdate();
        }
      },
      // 删除条件节点
      delCondition(index, indexs) {
        // 既然是条件节点，那么至少有两个且两个以上的选择才能作为条件节点，故小于等于2个调节删除该节点
        console.log(index, indexs,'删除条件节点');
        if (this.copyList[index].list.length <= 2) this.del(index);
        else this.copyList[index].list.splice(indexs, 1) , this.$forceUpdate();
      },
      // 添加条件节点
      addCondition(index, type) {
        if (type == 'branchFlow') {
          this.copyList[index].list.push({
            setId: new Date().valueOf() + index.toString(),
            title: '审批节点LnV1c73',
            suggestFlag: false
          })
          this.$forceUpdate();
        } else {
          this.copyList[index].list.push({
            setId: new Date().valueOf() + index.toString(),
            title: '条件LnV1c73',
            suggestFlag: false
          })
          this.$forceUpdate();
        }
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {
        });
      },
      // 输入框失焦事件
      blur(index) {
        this.copyList[index].suggestFlag = false;
        this.$forceUpdate();
      },
      // 条件输入框失焦事件
      conditionBlur(index, indexs) {
        this.copyList[index].list[indexs].suggestFlag = false;
        this.$forceUpdate();
      }
    }
  }
</script>

<style lang="less" scoped>
    @import url('./common.less'); // 条件分支
</style>
